<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <!-- Tell the browser to be responsive to screen width -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta name="description" content="">
  <meta name="author" content="">
  <!-- Favicon icon -->
  <link rel="icon" type="image/png" sizes="16x16" href="../assets/images/favicon.ico">
  <title>壹脉智能CRM</title>
  <!-- Bootstrap Core CSS -->
  <link href="./css/bootstrap.min.css" rel="stylesheet">
  <!-- <link href="../assets/node_modules/perfect-scrollbar/css/perfect-scrollbar.css" rel="stylesheet"> -->
  <!-- <link href="../assets/node_modules/sweetalert/sweetalert.css" rel="stylesheet" type="text/css"> -->
  <!-- This page CSS -->
  <!-- chartist CSS -->
  <!-- <link href="../assets/node_modules/morrisjs/morris.css" rel="stylesheet"> -->
  <!--c3 CSS -->
  <!-- <link href="../assets/node_modules/c3-master/c3.min.css" rel="stylesheet"> -->
  <!--Toaster Popup message CSS -->
  <!-- <link href="../assets/node_modules/toast-master/css/jquery.toast.css" rel="stylesheet"> -->
  <!-- Custom CSS -->
  <link href="css/style.min.css" rel="stylesheet">
  <!-- Dashboard 1 Page CSS -->
  <!--<link href="css/pages/dashboard1.css" rel="stylesheet">-->
  <!-- You can change the theme colors from here -->
  <link href="css/colors/default.css" id="theme" rel="stylesheet">
  <link rel="stylesheet" href="css/diy.min.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="fix-header fix-sidebar card-no-border">
  <div class="preloader">
    <div class="loader">
      <div class="loader__figure"></div>
      <p class="loader__label">壹脉</p>
    </div>
  </div>
  <div id="main-wrapper" v-clock="">
    <header class="topbar">
      <nav class="navbar top-navbar navbar-expand-md navbar-light">
        <div class="navbar-header">
          <a class="navbar-brand" href="../index.html">
            <b>
              <img src="../assets/images/diy/yimai.png" alt="homepage" class="dark-logo" />
              <!--<img src="../assets/images/logo-light-icon.png" alt="homepage" class="light-logo"/>-->
            </b>
            <span>
              <span class="fs18 cblue p-l-6 fbold">壹脉智能CRM</span>
            </span>
          </a>
        </div>
        <div class="navbar-collapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item"> <a class="nav-link nav-toggler hidden-md-up waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
            <li class="nav-item"> <a class="nav-link sidebartoggler hidden-sm-down waves-effect waves-dark" href="javascript:void(0)"><i class="sl-icon-menu"></i></a> </li>
          </ul>
          <user-head></user-head>
        </div>
      </nav>
    </header>
    <aside class="left-sidebar">
      <div class="scroll-sidebar">
        <company-position></company-position>
        <nav class="sidebar-nav p-0">
          <c-slider current="2"></c-slider>
        </nav>
      </div>
    </aside>
    <div class="page-wrapper">
      <div class="container-fluid">
        <div class="row page-titles">
          <div class="col-md-5 align-self-center">
            <h3 class="text-themecolor">客户录入</h3>
            <ol class="breadcrumb">
              <li class="breadcrumb-item"><a href="javascript:void(0)">HOME</a></li>
              <li class="breadcrumb-item active">客户录入</li>
            </ol>
          </div>
        </div>
        <!--form-->
        <div class="row">
          <div class="col-lg-12">
            <div class="card">
              <div class="card-body">
                <form action="#" autocomplete="off">
                  <div class="form-body col-md-6">
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group ">
                          <label class="control-label required">
                            姓名
                          </label>
                          <input type="text" id="firstName" autocomplete="off" class="form-control phgray" v-model="clientForm.name" placeholder="请输入姓名">
                        </div>
                      </div>
                      <!--/span-->
                      <div class="col-md-6">
                        <div class="form-group">
                          <label class="control-label required">
                            手机号
                          </label>
                          <input type="text" id="lastName" autocomplete="off" class="form-control form-control-danger phgray" v-model="clientForm.phone" placeholder="请输入11位的手机号码">
                        </div>
                      </div>
                      <!--/span-->
                    </div>
                    <!--/row-->
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group ">
                          <label class="control-label required">
                            微信号
                          </label>
                          <input type="text" id="wx" autocomplete="off" class="form-control phgray" v-model="clientForm.personalWx" placeholder="请输入微信号">
                        </div>
                      </div>
                      <!--/span-->
                      <div class="col-md-6">
                        <div class="form-group ">
                          <label class="control-label">
                            企业微信
                          </label>
                          <input type="text" id="company_wx" autocomplete="off" class="form-control phgray" v-model="clientForm.companyWx" placeholder="请输入企业微信">
                        </div>
                      </div>
                      <!--/span-->
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group ">
                          <label class="control-label">
                            邮箱
                          </label>
                          <input type="text" id="email" autocomplete="off" class="form-control phgray" v-model="clientForm.email" placeholder="请输入邮箱">
                        </div>
                      </div>
                      <!--/span-->
                      <div class="col-md-6">
                        <div class="form-group ">
                          <label class="control-label">
                            职位
                          </label>
                          <input type="text" id="post" autocomplete="off" class="form-control phgray" v-model="clientForm.position" placeholder="请输入职位">
                        </div>
                      </div>
                      <!--/span-->
                    </div>
                    <div class="row">
                      <div class="col-md-6">
                        <div class="form-group">
                          <label class="control-label">
                            公司
                          </label>
                          <input type="text" id="company" autocomplete="off" class="form-control phgray" v-model="clientForm.createCompanyName" placeholder="请输入公司名称">
                        </div>
                      </div>
                      <!--/span-->
                      <div class="col-md-6">
                        <div class="form-group">
                          <label class="control-label">
                            备注
                          </label>
                          <input type="text" id="mark" autocomplete="off" class="form-control phgray" v-model="clientForm.customerRemark" placeholder="请输入备注">
                        </div>
                      </div>
                      <!--/span-->
                    </div>
                    <div class="row">
                      <div class="p-l-15">
                        <div class="form-group m-b-8 ">
                          <label class="control-label ">
                            标签
                          </label>
                          <br>
                          <!--<label class="control-label text-success">
                                                    添加标签
                                                </label>-->
                          <div class="position-relative">
                            <div>
                              <span class="text-success m-b-20 curpointer" @click="showTagsList">
                                添加标签
                              </span>
                              <span class="fs14 cbcc p-l-20 curpointer" @click="edit_tags_show = !edit_tags_show">编辑标签组</span>
                            </div>
                            <div class="d-flex" v-show="choose_tags.length>=0">
                              <span class="p-l-20 p-r-20 bradius6 m-r-10 m-b-10 curpointer lh30" v-for="(v,k) in choose_tags" :key="k" :class="v.lableColor.toLowerCase() == '#f5f5f6' ? 'c78' : 'cfff' " v-if="v.id" :style="{background:v.lableColor}">
                                {{v.lableName}}
                              </span>
                            </div>
                            <!--标签-->
                            <div :class="tags_show ? 'opacity1' :'opacity0 zindex-1'" style="bottom: calc(100% + 5px)" class="position-absolute tag-component trans2 left0 w360 bgfff shadow-gray bradius4 fs14 p-t-29 p-l-30 p-b-30 lh30">
                              <div v-for="(v,k) in tags_lists" :key="k">
                                <p v-html="v.lableName" class="m-b-0"></p>
                                <div class="d-flex wrap p-b-10">
                                  <span class="p-l-20 p-r-20 bradius6 m-r-10 m-b-10 curpointer" v-for="(v2,k2) in v.list" :key="k2" :class="v2.id == tags[k].id ? 'btn-success cfff' : 'c78 bgf5f6 ' " @click="chooseTag(k,v2)" v-html="v2.lableName"></span>
                                </div>
                              </div>
                              <div class="d-flex lh40 fs14 p-r-30">
                                <div class="ml-auto d-flex">
                                  <span class="p-r-20 c78 curpointer" @click="resetTagId">重置</span>
                                  <span class="w85 textc btn-success cfff bradius4 curpointer" @click="savetags">保存</span>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="row">
                      <div class="p-l-15">
                        <div class="form-group m-b-20">
                          <label class="control-label has-danger">
                            共享范围
                            <span class="form-control-feedback"> *</span>
                          </label>
                          <div>
                            <div class="custom-control custom-radio d-inline-block m-r-30">
                              <input type="radio" id="customRadio3" v-model="clientForm.customerState" value="1" class="custom-control-input">
                              <label class="custom-control-label" for="customRadio3">自己独占</label>
                              <div class="custom-control custom-radio d-inline-block">
                                <input type="radio" id="customRadio4" v-model="clientForm.customerState" value="2" class="custom-control-input">
                                <label class="custom-control-label" for="customRadio4">企业共享</label>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div class="d-flex">
                      <span class="w85 textc btn-success cfff bradius4 curpointer lh40" :class="{disabled: loading}" @click="saveClient">保存</span>
                    </div>
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--编辑标签-->
    <div class="edit_tags bg000_3 position-fixed d-flex align-cen top0 left0 w100p h100p zindex99 " v-if="edit_tags_show" @click="modalTap($event)" id="fix_modal">
      <div class="inner bgfff fs14 w629 mauto " style="max-height: 750px;overflow-y: auto">
        <p class="p-t-23 textc fs16 m-b-55">编辑标签组</p>
        <!--标签组-->
        <div class="p-l-60 p-b-18" v-for="(v,k) in tags_lists" :key="k">
          <!--标签名称-->
          <div class="d-flex align-cen m-b-12">
            <span class="fs16">*</span>
            <div class="form-group m-b-0 p-l-24 w300 contentbox">
              <input type="text" class="form-control phgray p-l-17" placeholder="请输入标签组名" v-model="v.lableName" maxlength="10">
            </div>
            <span class="m-l-30" @click.stop="del(0,k,0,v.id)">删除</span>
            <span class="cblue fs14 p-l-21 curpointer" @click.stop="add(1,k)" v-if="0 == v.list.length">添加子标签</span>
          </div>
          <!--子标签-->
          <div class="d-flex align-cen m-b-12" v-for="(item,index) in v.list" :key="index">
            <div class="form-group m-b-0 p-l-32 w240 contentbox">
              <input type="text" class="form-control phgray p-l-17" placeholder="请输入子标签名" v-model="item.lableName" maxlength="10">
            </div>
            <span class="w12 h12 braduis50p bgblue m-l-29 curpointer" :style="{background : item.lableColor}" @click.stop="color_show_tap($event,item.id , k ,index)"></span>
            <span class="m-l-47 curpointer" @click.stop="del(1,k,index,item.id)">删除</span>
            <span class="cblue fs14 p-l-21 curpointer" @click.stop="add(1,k)" v-if="index == v.list.length-1">添加子标签</span>
          </div>
        </div>
        <!--添加标签组-->
        <p class="fs14 cblue p-l-51 m-b-48 curpointer d-inline-block" @click.stop="add(0)">添加标签组</p>
        <!--按钮-->
        <div class="jscen d-flex p-b-50">
          <span class="bblue cblue w85 textc lh40 bradius4 curpointer" @click.stop="hideAddModal">取消</span>
          <span class="bblue bgblue cfff w85 textc lh40 bradius4 curpointer m-l-10" @click.stop="saveTagsTree">确定</span>
        </div>
      </div>
      <!--choose  color-->
      <div class="position-absolute shadow-gray textc choose_color disflex" :class="color_modal ? '' : 'w0'" @click.stop="" :style="{top:fix_y + 'px' , left : fix_x + 'px'}">
        <div class="bgfff  p-l-15 p-r-15 bradius5 p-b-20">
          <b @click="choose_color('#FD634E')" class="d-block w13 h12 braduis50p m-t-21 btn-danger"></b>
          <b @click="choose_color('#FFA133')" class="d-block w13 h12 braduis50p m-t-21 btn-warning"></b>
          <b @click="choose_color('#2BCF88')" class="d-block w13 h12 braduis50p m-t-21 bggreen"></b>
          <b @click="choose_color('#51CDCB')" class="d-block w13 h12 braduis50p m-t-21 bgblue"></b>
          <b @click="choose_color('#566C84')" class="d-block w13 h12 braduis50p m-t-21 bg566"></b>
          <b @click="choose_color('#F5F5F6')" class="d-block w13 h12 braduis50p m-t-21 bgf5f6"></b>
        </div>
        <span class="triangle_border_right shadow-gray mt5">
        </span>
      </div>
    </div>
  </div>
  <!-- All Jquery -->
  <!-- ============================================================== -->
  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.min.js"></script>
  <script src="js/sidebarmenu.js"></script>
  <script src="js/custom.min.js"></script>
  <script src="js/layer/layer.js"></script>
  <script src="js/vue.js"></script>
  <script src="js/config.js"></script><script src="js/extend.js"></script>
  <script>
  $(function() {
    var vw = new Vue({
      el: '#main-wrapper',
      // components:{header},
      data: {
        isBoss: false,
        username: '用户昵称',
        search_key: '', //搜索关键字
        tags: [{}, {}, {}],
        clientForm: {
          name: '',
          phone: '',
          personalWx: '',
          companyWx: '',
          email: '',
          position: '',
          companyId: 0,
          createCompanyName: '',
          customerRemark: '',
          customerState: '2',
        },
        choose_tags: [{}, {}, {}],
        tags_show: false, //显示tag
        edit_tags_show: false, //编辑tags
        color_modal: false,
        choose_color_id: 0,
        active_id1: 0, //当前选择的一级分类id
        active_id2: 0, //当前选择的二级分类的id
        fix_y: 52,
        fix_x: 0,
        tags_lists: [],
        loading: false,
        cardId: '',
      },
      mounted() {
        this.cardId = $.formatParams(location.href).id;
        let info = JSON.parse(localStorage.getItem('info'));
        this.isBoss = info.roleId != 0;
        this.clientForm.customerState = this.isBoss ? "1" : "2";
        this.getTree();

        if (this.cardId) {
          this.getCardInfo();
        }
      },
      methods: {
        getCardInfo() {
          let _this = this;

          $.cAjax('/crmPc/customer/getCustomerInfo', {
            data: {
              cardId: this.cardId,
            }
          }).then(function(data) {
            data.companyId = 0;
            _this.clientForm = Object.assign({}, _this.clientForm, data);
            _this.choose_tags = data.lableResponseList ? data.lableResponseList.map(val => {
              return {
                id: val.lableId,
                lableName: val.lableName,
                lableColor: val.lableColor,
                lableId: val.lableId
              }
            }) : [{}, {}, {}];
            _this.choose_tags.length < 3 && _this.choose_tags.push(...new Array(3 - _this.choose_tags.length).fill({}));
          })
        },
        // 获取标签
        getTree() {
          let _this = this;
          $.cAjax('/crmPc/customer/getTree')
            .then(function(data) {
              if (data) {
                _this.tags_lists = [];
                let datas = [];
                data.forEach(function(i1, k1) {
                  datas.push({
                    lableName: i1.lableName,
                    list: [],
                    id: i1.lableId,
                    lableId: i1.lableId
                  });
                  i1.lableResponses && i1.lableResponses.forEach(function(i2, k2) {
                    datas[k1].list.push({
                      lableName: i2.lableName,
                      lableColor: i2.lableColor,
                      id: i2.lableId,
                      lableId: i2.lableId
                    })
                  })

                });
                _this.tags_lists = datas;
              }
            })
        },
        saveTagsTree() {
          this.color_modal = false;
          $.cAjax('/crmPc/customer/addLableList', {
            data: {
              list: this.tags_lists
            },
          }).then(res => {
            this.edit_tags_show = false;
            layer.msg('保存成功');
            this.getTree();
          }).catch(err => {
            layer.alert(err.message);
          });
        },
        showTagsList() {
            this.tags_show = true;
            this.tags = JSON.parse(JSON.stringify(this.choose_tags));
            window.addEventListener('click', this.tagClick,true)
          },
        tagClick(e) {
          let inTagComponent = false;
          let i = 0;
          while (i < e.path.length) {
            const classList = e.path[i].classList ? Array.prototype.slice.call(e.path[i].classList) : [];
            if (classList.includes('tag-component')) {
              inTagComponent = true
              return false;
            }
            i++
          }
          if (!inTagComponent) {
            this.tags_show = false;
          }
        },
        hideAddModal() {
          this.edit_tags_show = !this.edit_tags_show;
          this.getTree();
        },
        // 保存客户
        saveClient() {
          if (this.loading) return;
          const { name, phone, personalWx, email } = this.clientForm;

          if (!name.trim()) {
            layer.alert('姓名不能为空');
            return;
          }

          if (!phone.trim() && !personalWx.trim()) {
            layer.alert('手机号或者微信号必填一个');
            return;
          }

          if (phone && phone.trim() && !$.checkPhone(parseInt(phone).toString())) {
            layer.alert('请输入正确手机号');
            return;
          }

          if (email && email.trim() && !$.checkEmail(email.trim())) {
            layer.alert('请输入正确邮箱');
            return;
          }


          var _this = this;
          var param = JSON.parse(JSON.stringify(this.clientForm));
          var url = param.customerId ? '/crmPc/customer/updCustomer' : '/crmPc/customer/manualAdd';
          param.lableIds = this.choose_tags.filter(val => {
            return val.id;
          });
          param.lableIds = param.lableIds ? param.lableIds.map(val => parseInt(val.id)) : [];
          // param.lableIds = param.lableIds.join(',');
          delete param.turnoverAmount;
          // param.customerState = 2;
          delete param.createTime;
          this.loading = true;
          $.cAjax(url, {
            data: param,
          }).then(function(res) {
            _this.loading = false;

            layer.msg(param.customerId ? '修改成功' : '添加成功');

            setTimeout(function() {
              history.back();
            }, 1.5 * 1000);
          }).catch(function(err) {
            _this.loading = false;
            if (err.code == 201) {
              let data;
              try {
                data = JSON.parse(err.message);
                layer.closeAll();
              } catch (e) {
                data = {};
              }

              if (data.type) {
                if (data.type == '1') {
                  layer.alert('该用户是本公司员工，不能添加为客户');
                } else if (data.type == '2') {
                  layer.alert('该客户已被成员' + data.data + '独占，请与他取得联系');
                } else if (data.type == '3') {
                  layer.confirm('共享客户池已存在该客户，前去抢为独占', function(index) {
                    layer.close(index);
                    location.href = location.origin + '/main/shareCustomerDetail.html?id=' + data.data;
                  }, function(index) {
                    layer.close(index);
                  })
                }
              }
            }
          })
        },
        chooseTag(index1, tag) { //选择标签
          this.$set(this.tags, index1, JSON.parse(JSON.stringify(tag)));
        },
        resetTagId() { //重置
          this.tags = [{}, {}, {}];
          this.choose_tags = [{}, {}, {}];
          this.tags_show = false;
        },
        savetags() { //保存
          this.choose_tags = JSON.parse(JSON.stringify(this.tags));
          this.tags_show = false;
        },
        color_show_tap(dom, id, index1, index2) { //标签选择颜色
          let v = this;
          if (index2 == v.active_id2 && index1 == v.active_id1) {
            v.color_modal = !v.color_modal;
            v.fix_y = dom.pageY - 21;
            v.fix_x = dom.pageX - 64;
            return
          }
          console.log(dom);

          v.fix_y = dom.pageY - 21;
          v.fix_x = dom.pageX - 64;
          v.color_modal = true;
          v.choose_color_id = id;
          v.active_id1 = index1;
          v.active_id2 = index2;
        },
        del(method, index1, index2, lableId) { //删除标签
          // method ： 0 --  标签组 ， 1 -- 单个 ，
          // index1 : 一级分类的index ， index2 ： 二级分类 index
          this.color_modal = false;

          if (method == 0) {
            this.tags_lists.splice(index1, 1);
          } else if (method == 1) {
            this.tags_lists[index1].list.splice(index2, 1)
          }
        },
        add(method, index1) { //添加标签
          //method : 0 -- 标签组 ， 1 -- 子标签
          // index1 ： 一级分类index
          if (method == 0) {
            if (this.tags_lists.length >= 3) {
              layer.msg("最多只能添加3组标签！");
              return
            }

            this.tags_lists.push({
              lableName: '',
              list: [
                { lableName: '', lableColor: '#F5F5F6' },
                { lableName: '', lableColor: '#F5F5F6' },
              ]
            })

          } else if (method == 1) {
            if (this.tags_lists[index1].list.length >= 6) {
              layer.msg('最多只能添加6个子标签！');
              return
            }

            this.tags_lists[index1].list.push({ lableName: '', lableColor: '#F5F5F6' }, )
          }

        },
        choose_color(color) { //选择颜色
          this.$set(this.tags_lists[this.active_id1].list[this.active_id2], 'lableColor', color)
        },
        editTagsSave() { //保存

        },
        modalTap(dom) {
          if (dom.target.id == 'fix_modal') {
            this.edit_tags_show = !this.edit_tags_show;
          }
          this.color_modal = false;
        }

      }

    })
  })
  </script>
</body>

</html>
